<template>
  <aigc-card :footer="isEdit" header>
    <template #header>
      <span>系统管理</span>

      <span class="float-right"
        ><el-button type="primary" @click="editSystem">{{
          editText
        }}</el-button></span
      >
    </template>
    <el-form :model="systemInfo" label-width="120" label-position="left">
      <el-form-item label="请求访问速率">
        <el-input
          v-if="isEdit"
          v-model="systemInfo.requestAccessRate"
        ></el-input>
        {{ !isEdit ? systemInfo.requestAccessRate : "" }}
      </el-form-item>
      <el-form-item label="额度提醒">
        <el-input v-if="isEdit" v-model="systemInfo.quotaReminder"></el-input>
        {{ !isEdit ? systemInfo.quotaReminder : "" }}
      </el-form-item>
    </el-form>

    <template v-if="isEdit" #footer>
      <div class="flex justify-center">
        <el-button type="primary">保存</el-button>
      </div>
    </template>
  </aigc-card>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import {getSystemInfo} from "@/api/system/systemAPI"
import { AigcSystemInfo } from "@/interface";
const systemInfo = reactive<AigcSystemInfo>({
  requestAccessRate: "",
  quotaReminder: "",
});
onMounted(async()=>{
  const [err,data] = await getSystemInfo()
  if(!err) Object.assign(systemInfo, data)
})
const isEdit = ref<boolean>(false);
const editSystem = () => {
  isEdit.value = !isEdit.value;
};
const editText = computed(() => {
  if (isEdit.value) {
    return "取消";
  } else {
    return "修改";
  }
});
</script>
